<template>
  <w-pop ref="pop" :direction="'btt'" :showHeader="false" :closeModal="false">
    <el-icon class="close_icon" size="52" color="#fff" @click="handleClose">
      <CircleClose />
    </el-icon>
    <div class="product_pop_container">
      <div class="header">
        <div class="cover">
          <img :src="productData.productUrl" v-onerror alt="" srcset="" />
        </div>
        <div class="detail">
          <div class="name">{{ productData.productName }}</div>
          <div class="price">HKD{{ productData.amount }}</div>
        </div>
      </div>
      <div class="nums_container">
        <!-- sku 选择只有零售和周计划 餐没有sku -->
        <div class="eats_type" v-if="productData.isFlag == 0">
          <div class="title">{{ $t("detail.taste") }}</div>
          <el-input @click="handleOpenTaste" :placeholder="$t('detail.totals')" readonly size="large"
            suffix-icon="ArrowRightBold"></el-input>
        </div>


        <div class="product_total_control">
          <div class="title">{{ $t("detail.totals") }}</div>
          <div class="nums_control">
            <button @click="handleMinus" v-if="productData.isFlag == 1" style="margin-right:4px;"><b>-</b></button>
            <el-input v-model="productData.InputTotal" readonly size="large" type="tel" class="nums"></el-input>
            <button @click="handleAdd" v-if="productData.isFlag == 1" style="margin-left:4px;"><b>+</b></button>
          </div>
        </div>
      </div>

      <div class="btn">
        <w-button size="large" round @click="handleAddCar">{{ $t('login.comfir') }}</w-button>
      </div>
    </div>
    <!-- sku -->
    <w-taste-pop ref="skuPop" @addBuySucc="addBuySucc"></w-taste-pop>
  </w-pop>
</template>

<script>
import { defineComponent, ref } from "vue";
import storage from "@/utils/storage";
import { addCar } from "@/api/car";
import { ElMessage, ElMessageBox } from "element-plus";
import useFn from '../use/index'
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import store from "@/store";
export default defineComponent({
  props: {},
  components: {},
  setup() {

    const { t } = useI18n()
    const pop = ref();

    const productData = ref({})
    const open = (item) => {
      console.log(item, '点击商品')
      productData.value = item
      productData.value.InputTotal = productData.value.total
      productData.value.currentTotal = 0
      productData.value.singleTotal = productData.value.total
      pop.value.open();
    };

    const skuPop = ref()
    const handleOpenTaste = () => {
      skuPop.value.open(productData.value.id, productData.value)
    };

    const handleClose = () => {
      pop.value.close();

    }

    const handleAdd = () => {
      productData.value.InputTotal += 1
    }


    const handleMinus = () => {
      productData.value.InputTotal -= 1
      if (productData.value.InputTotal <= 1) {
        productData.value.InputTotal = 1
      }
    }


    // 购物车加入

    const handleAddCar = async () => {
      // 如果没登录不能购买订餐计划
      if (!storage.getStorage('token') && productData.value.productType == 2) {
        ElMessageBox.confirm(
          t('error.tips9'),
          '提示',
          {
            confirmButtonText: '确认',
            showCancelButton: false,
            type: 'warning',
            showClose: false,
            closeOnClickModal: false
          }
        ).then(() => {
          router.push('/login')
        })
        return
      }
      const totalArr = []; //所有数据
      const localSku = storage.getStorage("adds");
      const masterAddSkuList = [];
      if (localSku && localSku.length) {
        localSku.forEach((el) => {
          if (el.id === productData.value.id) {
            el.list.skuVos.forEach((sku) => {
              if (sku.defaultNumber) {
                masterAddSkuList.push(sku);
              }
            });
          }
        });
      }
      totalArr.push({
        foodListDtoList: masterAddSkuList,
        productId: productData.value.id,
        num: productData.value.InputTotal,
      });

      console.log(totalArr, "提交参数");
      // LocalCarSave({
      //   foodListDtoList: masterAddSkuList,
      //   productId: productData.value.id,
      //   num: productData.value.InputTotal,
      //   time: '',
      //   type: 1,
      //   obj: productData.value,
      // })

      const res = await addCar(totalArr);
      if (res) {
        ElMessage({
          type: 'success',
          message: t('error.tips8')
        })
        handleClose()
        store.dispatch('getCarNums')

      }
    };

    //确认sku 更新外面
    const addBuySucc = () => {
      const arr = storage.getStorage("adds");
      console.log(arr);
      if (arr && arr.length) {
        arr.forEach((el) => {
          if (productData.value.id === el.id) {
            productData.value.singleTotal = el.itemObj.singleTotal;
            productData.value.currentTotal = el.itemObj.currentTotal;
            productData.value.InputTotal = el.itemObj.InputTotal;
          }
        });
      }
    };
    return {
      productData,
      skuPop,
      pop,
      open,
      handleOpenTaste,
      handleClose,
      handleAdd,
      handleMinus,
      addBuySucc,
      handleAddCar
    };
  },
});
</script>

<style scoped lang="scss">
.product_pop_container {
  .header {
    display: flex;
    height: 91px;
    overflow: hidden;
    padding: 20px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);

    .cover {
      height: 91px;
      width: 91px;

      img {
        width: 91px;
        height: 91px;
      }
    }

    .detail {
      margin-left: 9.6px;

      .name {
        color: #333;
        font-family: Helvetica;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        display: -webkit-box;
        /* Safari */
        -webkit-line-clamp: 2;
        /* number of lines to show */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .price {
        color: #333;
        font-family: Helvetica;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin-top: 12px;
      }
    }
  }

  .nums_container {
    padding: 16px;

    .eats_type {
      .title {
        color: #999;
        font-family: Helvetica;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin-bottom: 4px;
      }

      .ipt {
        border: 1px solid red;
      }
    }
  }

  .product_total_control {
    display: flex;
    flex-direction: column;
    margin-top: 12px;

    .title {
      color: #999;
      font-family: Helvetica;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      margin-bottom: 4px;
    }

    .nums_control {
      display: flex;

      button {
        width: 50px;
        height: 40px;
        background: #fff;
        border-radius: 0;
        border: 1px solid rgba(0, 0, 0, 0.12);

        b {
          font-size: 18px;
          color: #000;
        }
      }

      .nums {
        // margin: 0 8px;
      }

      ::v-deep(.el-input__inner) {
        text-align: center;
        font-weight: bold;
        color: #000;
      }
    }

  }


  .btn {
    padding: 16px;

    button {
      width: 100%;
    }
  }
}

.close_icon {
  position: absolute;
  right: 40%;
  top: -80px;
  z-index: 10000;
}
</style>
